<template>
  <h1>{{ msg }}</h1>
  <h3>{{ count }}</h3>
  <div>
    <button @click="moveLeft">left</button>
    <button @click="moveRight">right</button>
    <button @click="moveUp">top</button>
    <button @click="moveDown">down</button>
  </div>
  <div>
    <div v-for="(lineArray, $i) in pointArray" :key="$i" class="parent0">
      <div v-for="(item, $j) in lineArray" :key="$j" class="items">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue'
export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      required: true,
    },
  },
  setup: () => {
    const count = ref(0)
    const pointArray = ref([
      [0, 0, 0, 0],
      [0, 0, 0, 0],
      [0, 0, 0, 0],
      [0, 0, 0, 0],
    ])
    return { count, pointArray }
  },
  methods: {
    moveLeft() {
      console.log('Left')

      for (let j = 0; j < this.pointArray.length; j++) {
        const lineArray = this.pointArray[j]

        for (let k = 0; k < lineArray.length; k++) {
          const element = lineArray[k]
        }
      }
    },
    moveRight() {
      console.log('right')
    },
    moveUp() {
      console.log('up')
    },
    moveDown() {
      console.log('down')
    },
    genNumber(min = 0, max = 9) {
      const num = parseInt(
        (Math.random() * (max - min + 1) + min).toString(),
        10
      )
      if (num > 0) {
        return (num - 1) % 3
      }
      return num
    },
    renderPoint() {
      for (let index = 0; index < 50; index++) {
        const x = this.genNumber()
        const y = this.genNumber()
        if (!this.pointArray[x][y]) {
          this.pointArray[x][y] = 2
          return true
        }
      }
      return false
    },
  },
  mounted() {
    this.renderPoint()
    this.renderPoint()
  },
})
</script>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
.parent0 {
  display: flex;
}
.items {
  flex: 1;
  border: 1px solid gray;
}
</style>
